<template>
  <div id="accounts">
    <div class="search">
      条件查询
      <input type="text" placeholder="输入公司名称或负责人信息" v-model="search">
      <el-button type="primary" @click="getAccounts">查询</el-button>
      <el-button type="success" @click="$router.push('/system/addAccounts')">添加</el-button>
    </div>
    
    <template>
      <el-table
        :data="accountData"
        stripe>
        <el-table-column
          prop="certificateNumber"
          label="证件号码">
        </el-table-column>
        <el-table-column
          prop="passbookNumber"
          label="卡号">
        </el-table-column>
        <el-table-column
          prop="registerCapital"
          label="开户金额">
        </el-table-column>
        <!-- <el-table-column
          prop="registerDate"
          label="注册日期">
        </el-table-column> -->
        <el-table-column
          prop="password"
          label="密码">
        </el-table-column>
        <el-table-column
          prop="tel"
          label="电话">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>

      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.currentPage"
          :page-sizes="[5, 10, 15]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
          >
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
  import axios from '../../../http/axios'
  import apis from '../../../http/apis/apis'
  import {createNamespacedHelpers} from 'vuex'
  const {mapState, mapActions} = createNamespacedHelpers('companies')

  export default {
    mounted() {
      this.getAccounts();
    },

    data() {
      return {
        accountData: [],
        pageData: {
          currentPage: 1,
          pageSize: 5,
          total: 0,
        },
        search: ''
        
      }
    },
    computed: {
      
    },
    methods: {
      async getAccounts() {
        const {data} = await apis.accounts.getAccounts()
        this.accountData = data.data
      },
      handleSizeChange(val) {
        this.pageData.pageSize = val
      },
      handleCurrentChange(val) {
        this.pageData.currentPage = val
      }

    },
    watch: {
      pageData: {
        handler() {
          this.getCompanies();
        },
        deep: true,
      }
    }
  }
</script>


<style lang="scss">
  #accounts {
    .search {
      // margin: 30px 0;
      margin-bottom: 20px;
      display: flex;
      
      line-height: 40px;
      height: 40px;
      input {
        width: 200px;
        font-size: 14px;
        color: #666;
        height: 30px;
        border-radius: 5px;
        border: none;
        outline: none;
        padding-left: 10px;
        margin: 0 20px;
        margin-top: 5px;
      }
    }
    .block {
      margin-top: 10px;
      margin-left: 230px;
    }
    table {
      border-collapse: collapse;
      border: 1px solid #ccc;
      border-bottom: none;
      font-size: 12px;
      th {
        text-align: center;
        border: 1px solid #ccc;
        border-bottom: none;
      }
      td {
        border: 1px solid #ccc;
        text-align: center;
        padding: 2px 0
      }

    }
  }
</style>